<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="g" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/style.css" title="style" />
	<link rel="alternate stylesheet" type="text/css" href="css/style_noir.css"title="style_noir" />
	<title>musicMAP - Carte</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.6.1");
        </script>
	<script type="text/javascript">
            google.load('visualization', '1', {packages: ['geomap']});

            jQuery.error = console.error;
            var groupe;
            var data;
            var options = {};
            var idVilles;
            var geomap;

            options['colors'] = [0xBFF3FE, 0x80E8FE, 0x00CAF9]; //couleurs bleues
            options['width']=[1200];
            options['height']=[600];
            options['dataMode'] = 'markers';
                
            google.setOnLoadCallback(initialize);

            function initialize() {

                $('#searchBox').keypress(function(e) {
                    if(e.keyCode == 13) {
                        refresh($('#searchBox').val());
                    }
                });

                geomap = new google.visualization.GeoMap(document.getElementById('visualization'));
                google.visualization.events.addListener(geomap, 'regionClick', function(e) {
                    //alert(parseInt(e['region']));
                    window.location.href = 'init.html?action=stats&idVille='+idVilles[parseInt(e['region'])] + '&groupe=' + groupe;
                });

            <c:if test="${groupe!=null}">refresh('<c:out value="${groupe}"/>');</c:if>
                
            }

            function refresh(g) {
                groupe=g;
                idVilles = new Array();
                data = new google.visualization.DataTable();
                data.addColumn('number', 'LATITUDE', 'Latitude');
                data.addColumn('number', 'LONGITUDE', 'Longitude');
                data.addColumn('number', 'Popularité', 'Value');
                data.addColumn('string', 'HOVER', 'HoverText');
                data.addRows(1);
                idVilles.push(0);
                $.getJSON('init.html?action=getPopByCity&semaine=${semaine}&groupe=' + groupe, function(json) {
                              $.each(json, function(key, val) {
                                  data.addRow([val.lat, val.lng, val.pop, val.ville]);
                                  idVilles.push(val.idVille);
                              });
                              geomap.draw(data, options);
                });
            }

  </script>

	<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
</head>
<body>
	<div id="content">
		<p id="top"></p>
		<div id="logo">
			<h1><a href="index.html"></a></h1>
		</div>
                <g:navigation page="map"/>
		<div class="ligne"></div>
		<div>
			<h1 class="titre" >Carte de la popularité de :
                            <form method="GET" action="init.html">
                               <input type="hidden" name="action" value="map"/>
                              <input type="search" list="groupes" name="groupe" id="searchBox" <c:if test="${groupe!=null}">value="<c:out value="${groupe}"/>"</c:if> />
                              <datalist id="groupes">
                                <c:forEach items="${listeGroupes}" var="it" varStatus="st">
                                    <option><c:out value="${it}"/></option>
                                </c:forEach>
                              </datalist>

                              <span class="bouton_rechercher">
                                 <input type="submit" class="rechercher" value="Rechercher"/>
                              </span>
                            </form>
 
                            
                            <c:if test="${listeRegions!=null}">
                                Centrée autour de : 
                                <select id="choixRegion" onChange="regionSelect(this.id)">
                                    <c:forEach items="${listeRegions}" var="it" varStatus="st">
                                        <option value="${it[0]}"><c:out value="${it[1]}"/></option>
                                    </c:forEach>
                                </select>
                            </c:if>

                        </h1>
		</div>

                <div id="visualization"></div>

		<div id="pied">
                    <%@include file="inc/pied.html" %>
		</div>

                <script type="text/javascript">

                    function populariteSelect(choice) {
                        var selectElmt = document.getElementById(choice);
                        refresh(selectElmt.options[selectElmt.selectedIndex].value);
                    }

                    function regionSelect(choice) {
                        var selectElmt = document.getElementById(choice);
                        options['region'] = selectElmt.options[selectElmt.selectedIndex].value;
                        geomap.draw(data, options);
                    }
                  
                </script>
        </div>
</body>
</html>